import React, { Component } from "react";
import {
  View,
  Text,
  Image,
  TextInput,
  StyleSheet,
  FlatList,
  TouchableWithoutFeedback,
  ActivityIndicator,
} from "react-native";
import TopicCell from "./TopicCell";
import CommentCell from "./CommentCell";
import ChatInputBar from "../job/ChatInputBar";
import NetUtil from '../../net/net_util'
import Loading from "../../widget/Loading";
import Toast from "../../widget/Toast";
import * as RootNavigation from "../../../App";

let _this=null
export default  class DynamicDevelopmentDetail extends Component{
  constructor(props) {
    super(props);
    this.chatInputBar=null;
    this.loading=false;
    this.page={
      pageSize:10,
      pageNum:1
    };
    this.state={
      isMoreLoading:true,
      trendId:'',
      info:null,
      chatMsg:'',
      dataList:[]
    }
  }

  componentDidMount() {
    _this=this
    let id=this.props.route.params.id
    this.state.trendId=id
    this.getDynamicDetail()
    this.getDynamicCommentList()
  }

  /*获取动态详情*/
  getDynamicDetail(){
    NetUtil.get('trend/dynamic/detail',{trendId:this.state.trendId},(res)=>{
      if(res.code==200){
        this.setState({info:res.data})
      }
    })
  }

  /*获取动态评论列表*/
  getDynamicCommentList(){
    let params={
      trendId:this.state.trendId,
      pageNum:this.page.pageNum,
      pageSize:this.page.pageSize
    }
    this.loading=true
    NetUtil.get('trend/comment/page',params,(res)=>{
      console.log(res)
      this.loading=false
      if(res.code==200){
        let list=this.state.dataList;
        if(this.page.pageNum==1){
          list=[]
        }
        list=list.concat(res.data.data)
        this.setState({dataList:list,isMoreLoading:res.data.data.length<10?false:true})
      }
    })
  }

  /*评论点赞*/
  like(item){
    console.log(item)
    Loading.show()
    NetUtil.postFrom('trend/comment/like',{commentId:item.id},(res)=>{
      Loading.hide()
      if(res.code==200){
        item.isLike=item.isLike==0?1:0
        let num=item.isLike==1?1:-1
        item.likeNum=item.likeNum+num
        this.setState({dataList:this.state.dataList})
      }
    })
  }

  /*发布评论*/
  comment(text){
    let params={
      content:text,
      isReply:0,
      trendId:this.state.trendId,
    }
    Loading.show()
    NetUtil.postFrom('trend/comment/create',params,(res)=>{
      Loading.hide()
      this.chatInputBar.closeInputBar()
      if(res.code==200){
        Toast.add('发布成功')
        this.page.pageNum=1
        this.getDynamicCommentList()
      }
      else {
        Toast.add(res.msg)
      }
    })
  }

  /*评论详情*/
  commentDetail(id){
    RootNavigation.navigate('CCommentList',{trendId:this.state.trendId,commentId:id})
  }

   _endReached(){
    if(!this.state.isMoreLoading||this.loading)return;
    this.page.pageNum++
    this.getDynamicCommentList()
  }

  _renderItem(info){
    let comment=info.item
    return <CommentCell  comment={comment}
                         cellClick={(data)=>{_this.commentDetail(data.id)}}
                         like={(data)=>{_this.like(data)}}>
    </CommentCell>
  }

  _renderHeader(){
    return (
      <View>
        {this.state.info?(
          <TopicCell showComment={false} data={this.state.info}></TopicCell>
        ):null}
        <View style={{backgroundColor:'#F6F6F6',height:10}}></View>
        <View style={styles.commentHeader}>
          <Text style={styles.commentTitle}>全部评论</Text>
        </View>
      </View>
    )
  }

  _onBtnPress(){
    this.chatInputBar.openInputBar();
  }

  _onSendMsg(text){
    this.setState({
      chatMsg:text,
    });
    this.comment(text)
  }

  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 10,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }

  render() {
    return(
      <View style={{height:'100%',backgroundColor:'#fff'}}>
        <FlatList data={this.state.dataList}
                  ListHeaderComponent={this._renderHeader.bind(this)}
                  keyExtractor={(item)=>item.value}
                  showsVerticalScrollIndicator={false}
                  onEndReachedThreshold = {0.1} //当距离内容比例不足内容0.1比例时触发onEndReached
                  onEndReached = {this._endReached.bind(this)} //上拉加载数据
                  ListFooterComponent={()=>this.renderFooter()}
                  keyExtractor={item=>{return 'cell'+item.id}}
                  renderItem={this._renderItem}>
        </FlatList>
        <View style={styles.footer}>
          <TouchableWithoutFeedback onPress={this._onBtnPress.bind(this)}>
            <View style={styles.toolBar}>
              <Text style={styles.input}>说点什么...</Text>
            </View>
          </TouchableWithoutFeedback>
        </View>
        <ChatInputBar ref={s => this.chatInputBar = s} isVisible={true} onSend={(text) => this._onSendMsg(text)}></ChatInputBar>
        <Loading></Loading>
        <Toast></Toast>
      </View>
    )
  }
}

const styles=StyleSheet.create({
  commentHeader:{
    height:50,
    backgroundColor:'#fff',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    borderBottomStyle:'solid',
    borderBottomColor:'#F6F6F6',
    borderBottomWidth:1
  },
  commentTitle:{
    color:'#959595',
    fontSize:15,
    marginLeft:15
  },
  footer:{
    height: 83,
    backgroundColor: '#fff',
  },
  toolBar:{
   marginHorizontal:15,
   marginTop:8,
   height:34,
    borderRadius:17,
    backgroundColor:'#F6F7F9'
  },
  input:{
    flex:1,
    lineHeight:34,
    color:'#9E9FA1',
    fontSize: 12,
    marginLeft: 15,
    marginRight:15
  }
})
